import React, { Component } from 'react'
import { Button, Modal, Select, Form, Row, Col, Input, DatePicker, Radio, message } from 'antd';
import { connect } from 'dva';
const { TextArea } = Input;
import style from './index.css'
import BaseComponent from '@/components/BaseComponent';
import moment from 'moment';



@connect(({ user }) => ({
    // data: risk.riskData,
    currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            form: {
            },
            allTableData: [],
            provinceIdData: [],
            cityIdData: [],
            districtIdData: [],
            countyIdData: [],
            villageIdData: [],
            nationCodeData: []
        }
    }

    showModal = () => {
        this.getCity({ level: 1, parentCode: '1' })
        this.nationlist()
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        this.addPersonInfo(this.state.form)
        this.setState({
            visible: false,
            form: {}
        });
    };

    handleCancel = () => {
        // this.getDataByPage({})
        this.setState({
            visible: false,
            form: {}
        });

    };

    provinceIdChange = (value) => {
        const str = value ? this.state.provinceIdData.find(item => item.code == value) : '';
        const name = str.name
        this.setState((params) => ({
            form: {
                ...params.form,
                provinceId: value,
                provinceName: name,
            }
        }), () => {
            this.getCity({ level: 2, parentCode: value })
        });


    }
    cityIdChange = (value) => {
        const str = value ? this.state.cityIdData.find(item => item.code == value) : '';
        const name = str.name
        this.setState((params) => ({
            form: {
                ...params.form,
                cityId: value,
                cityName: name
            }
        }), () => {
            this.getCity({ level: 3, parentCode: value })
        }
        );


    }

    districtIdChange = (value) => {
        const str = value ? this.state.districtIdData.find(item => item.code == value) : '';
        const name = str.name
        this.setState((params) => ({
            form: {
                ...params.form,
                districtId: value,
                districtName: name
            }
        }), () => {
            this.getCity({ level: 4, parentCode: value })
        });
    }
    countyIdChange = (value) => {
        const str = value ? this.state.countyIdData.find(item => item.code == value) : '';
        const name = str.name
        this.setState((params) => ({
            form: {
                ...params.form,
                countyId: value,
                countyName: name,
            }
        }), () => {
            this.getCity({ level: 5, parentCode: value })
        });
    }

    villageIdChange = (value) => {
        const str = value ? this.state.villageIdData.find(item => item.code == value) : '';
        const name = str.name
        this.setState((params) => ({
            form: {
                ...params.form,
                villageId: value,
                villageName: name
            }
        }));
    }

    nameChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                name: value
            }
        }));
    }

    sexChange = e => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                sex: value
            }
        }));
    };

    nationCodeChange = (value) => {
        if (value !== -1) {
            const person = this.state.nationCodeData[value - 1];
            this.setState((params) => ({
                form: {
                    ...params.form,
                    nationCode: value,
                    nationName: person
                }
            }));
        }


    }
    birthdayChange = (date, dateString) => {
        console.log(date, dateString)
        this.setState((params) => ({
            form: {
                ...params.form,
                birthday: dateString
            }
        }));
    }

    addrChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                addr: value
            }
        }));
    }

    idCardChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                idCard: value
            }
        }));
    }

    qfjgChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                qfjg: value
            }
        }));
    }

    yxStartDateChange = (date, dateString) => {
        console.log(date, dateString)
        this.setState((params) => ({
            form: {
                ...params.form,
                yxStartDate: dateString
            }
        }));
    }

    yxEndDateChange = (date, dateString) => {
        console.log(date, dateString)
        this.setState((params) => ({
            form: {
                ...params.form,
                yxEndDate: dateString
            }
        }));
    }
    phoneChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                phone: value
            }
        }));
    }


    //查询省
    getCity = (param) => {
        this.execHttp('plannedFollowUp/getCity', { ...param }).then(resp => {
            if (resp) {
                if (param.level == 1) {
                    this.setState({
                        provinceIdData: resp.data,
                    })
                } else if (param.level == 2) {
                    this.setState({
                        cityIdData: resp.data,
                    })
                } else if (param.level == 3) {
                    this.setState({
                        districtIdData: resp.data,
                    })
                } else if (param.level == 4) {
                    this.setState({
                        countyIdData: resp.data,
                    })
                } else if (param.level == 5) {
                    this.setState({
                        villageIdData: resp.data,
                    })
                }
            }
        });
    };
    //名族  nationlist
    nationlist = () => {
        this.execHttp('personalInformation/nationlist').then(resp => {
            if (resp) {
                this.setState({
                    nationCodeData: resp.data,
                })
            }
        });
    };

    //添加保存
    addPersonInfo = (from) => {
        this.execHttp('personalInformation/addPersonInfo', {
            ...from
        }).then(resp => {
            if (resp && resp.success) {
                message.success(resp.message);
                this.props.getDataByPage({})
            } else {
                message.error(resp.message);
            }
        });
    };



    render() {
        const { visible, confirmLoading } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };


        return (
            <div style={{ display: "inline-block" }}>
                <Button type="primary" onClick={this.showModal} >添加</Button>
                <Modal
                    title="人员信息添加"
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={this.handleCancel}
                    width={1500}
                >
                    <Form {...formItemLayout} >
                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="所属省份">
                                    <Select allowClear value={this.state.form.provinceId} onChange={this.provinceIdChange} style={{ width: 200 }} placeholder="请选择所属省份">
                                        {this.state.provinceIdData.map(item => (
                                            <Select.Option key={item.code}>{item.name}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="所属城市">
                                    <Select allowClear value={this.state.form.cityId} onChange={this.cityIdChange} style={{ width: 200 }} placeholder="请选择所属城市">
                                        {this.state.cityIdData.map(item => (
                                            <Select.Option key={item.code}>{item.name}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="所属区/县">
                                    <Select allowClear value={this.state.form.districtId} onChange={this.districtIdChange} style={{ width: 200 }} placeholder="请选择所属区/县">
                                        {this.state.districtIdData.map(item => (
                                            <Select.Option key={item.code}>{item.name}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="所属乡镇">
                                    <Select allowClear value={this.state.form.countyId} onChange={this.countyIdChange} style={{ width: 200 }} placeholder="请选择所属乡镇">
                                        {this.state.countyIdData.map(item => (
                                            <Select.Option key={item.code}>{item.name
                                            }</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16} >

                            <Col span={6}>
                                <Form.Item label="所属村">
                                    <Select allowClear value={this.state.form.villageId} onChange={this.villageIdChange} style={{ width: 200 }} placeholder="请选择所属村">
                                        {this.state.villageIdData.map(item => (
                                            <Select.Option key={item.code}>{item.name
                                            }</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="姓名">
                                    <Input placeholder="请输入姓名" value={this.state.form.name}
                                        onChange={this.nameChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="性别">
                                    <Radio.Group value={this.state.form.sex} onChange={this.sexChange} >
                                        <Radio value={"男"}>男</Radio>
                                        <Radio value={"女"}>女</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="民族">
                                    <Select allowClear value={this.state.form.nationCode} onChange={this.nationCodeChange} style={{ width: 200 }} placeholder="请选择民族">
                                        {this.state.nationCodeData.map((item, index) => (
                                            <Select.Option key={index + 1}>{item
                                            }</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="出生日期">
                                    <DatePicker style={{ width: 200 }} showTime format="YYYY-MM-DD" placeholder="请选择出生日期"
                                        value={this.state.form.birthday === undefined ? this.state.form.birthday : moment(this.state.form.birthday, 'YYYY-MM-DD')}
                                        onChange={this.birthdayChange} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="住址">
                                    <Input placeholder="请输入住址" value={this.state.form.addr}
                                        onChange={this.addrChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="身份证号">
                                    <Input placeholder="请输入身份证号" value={this.state.form.idCard}
                                        onChange={this.idCardChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="签发机关">
                                    <Input placeholder="请输入签发机关" value={this.state.form.qfjg}
                                        onChange={this.qfjgChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>

                        </Row>

                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="有限期限起始">
                                    <DatePicker style={{ width: 200 }} showTime format="YYYY-MM-DD" placeholder="请选择有限期限起始"
                                        value={this.state.form.yxStartDate === undefined ? this.state.form.yxStartDate : moment(this.state.form.yxStartDate, 'YYYY-MM-DD')}
                                        onChange={this.yxStartDateChange} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="有限期限结束">
                                    <DatePicker style={{ width: 200 }} showTime format="YYYY-MM-DD" placeholder="请选择有限期限结束"
                                        value={this.state.form.yxEndDate === undefined ? this.state.form.yxEndDate : moment(this.state.form.yxEndDate, 'YYYY-MM-DD')}
                                        onChange={this.yxEndDateChange} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="手机号">
                                    <Input placeholder="请输入手机号" value={this.state.form.phone}
                                        onChange={this.phoneChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Modal>


            </div>
        )
    }
}
